<template>
  <el-table :data="list">
    <el-table-column label="任务" min-width="29%" prop="task.name" />
    <el-table-column label="参数" min-width="29%" prop="parameter.name" />
    <el-table-column label="细节" min-width="34%" prop="detail" />
    <el-table-column label="操作" min-width="8%" />
    <div slot="append">
      <el-form :model="data" inline>
        <el-input v-model="data.id" type="hidden" />
        <el-row :gutter="10">
          <el-col :span="7">
            <el-form-item label>
              <v-select v-model="data.task_id" action="task" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label>
              <v-select v-model="data.parameter_id" action="parameter" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label>
              <el-input v-model="data.detail" placeholder />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label>
              <el-button icon="el-icon-upload2" @click="save" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-button>选择任务组</el-button>
      <!--      <el-button>取消全选</el-button>-->
      <!--      <el-button>全选二维码</el-button>-->
      <!--      <el-button>全选Rfid</el-button>-->
      <!--      <el-button>全选NFC</el-button>-->

    </div>
  </el-table>
</template>

<script>
import VSelect from '@/components/select'
import init from '@/mixins/init'
import API from '@/api/project/plan'
export default {
  components: { VSelect },
  mixins: [init],
  data() {
    return {
      data: {},
      list: []
    }
  },
  watch: {
    list() {
      this.$emit('total', { component: 'task', total: this.list.length })
    }
  },
  methods: {
    index() {
      API.tasks({ plan_id: this.value }).then(response => {
        this.list = response.data.data
      })
    },
    save() {
      API.task({ plan_id: this.value, ...this.data }).then(response => {
        if (!this.data.id) {
          this.data.id = response.data.id
          this.index()
        }
      })
    }
  }
}
</script>
